<!-- 进度条 -->
<template>
	<view class="pos_rel wa">
		<view class="strip wa o_h" :style="'background-color: #' + (bgc ? bgc : 'fff') + ';'">
			<view class="strip_item tac":style="'width:' + percentage + '%;background-color: #' + barBg + ';'"></view>
		</view>
		<view class="bar_info pos_abs" :style=" 
			'color: #' + fontCol + ';' +
			(percentage <= 50 ? 
			'left: calc(' + percentage + '% + 10rpx);' : 
			'right: calc( 100% - ' + percentage + '% + ' + fontLnegth + 'px);')
		">
			<view class="fz24" v-if="barName">{{ barName }}</view>
			<view class="fz24" v-else>{{ percentage }}</view>
		</view>
		<!-- 上角标 -->
		<view class="pos_thr pos_abs" v-if="posCol"
			:style="'border-bottom: 16rpx solid #' + posCol + ';' + 'left: calc(' + percentage + '% - 10rpx);'"
		></view>
	</view>
</template>
<script>
	export default {
		name: 'progress',
		props: ["bgc","barBg","percentage","barName","posCol","fontCol"],
		// bgc: 进度条背景色
		// barBg: 进度背景色
		// barName: 前面的字
		// percentage: 百分比
		// posCol: 下三角颜色
		data() {
			return {
				fontLnegth: 0,
			};
		},
		mounted(){
			this.setLen();
		},
		methods: {
			setLen(){
				// 计算文字长度
				const len = this.barName.length;
				this.fontLnegth = 6 * 3;
			}
		}
	}
</script>
<style>
	.strip {
		height: 32rpx;
		border-radius: 16rpx;
	}
	.strip_item {
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
	}
	.bar_info{
		top: 0;
	}
	/*三角标*/
	.pos_thr{
		width: 0;
		height: 0;
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
	}
</style>